<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>项目端代码参考</title>
  <meta name="description" content="项目端代码参考 项目端代码参考 项目端代码参考 项目端代码参考 项目端代码参考">
  <link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css"/>
  <link rel="stylesheet" href="assets/highlight/styles/a11y-dark.css" type="text/css" />
  <link rel="stylesheet" href="assets/highlight/unicode.css" type="text/css" />
  <script src="assets/plugins/jquery/jquery.min.js"></script>
  <script type="text/javascript" src="assets/highlight/highlight.pack.js"></script>
  <script type="text/javascript">hljs.initHighlightingOnLoad();</script>

</head>
<body>
<h2>项目端代码参考</h2>
<div class="flex">
  <div class="margin">
    <h3>bootstrapTable使用演示 <a target="_blank" href="https://www.bootstrap-table.com.cn/doc/api/table-options/"><small>官方文档</small></a></h3>
    <pre><code class="json">
$table.bootstrapTable({
  url: Utils.appendTifilter(this, "/r/draw/review/getCheckDataList/20/0"),
  method: 'post',
  pagination: true,
  classes: 'table table-bordered main-table two-story',
  //two-story只在双层表头添加
  paginationPreText: "上一页",
  paginationNextText: '下一页',
  paginationHAlign: 'left', //right, left
  paginationVAlign: 'bottom', //bottom, top, both
  paginationDetailHAlign: 'right', //right, left
  pageSize: 10,
  //toolbar: '#toolbar',  //jQuery选择指示工具栏，
  //例如： #toolbar, .toolbar，或DOM节点。
  //filterBar: '#filterBar',   //没有发现这个属性有啥用
  //height: $(window).height() - 126,
  queryParams: function (params) {
    params.projectId = $("#projectId").val();
    params.major = $("#major").val();
    return params;
  },
  columns: [[{
      field: "",
      title: "序号",
      rowspan: 2, //rowspan: 2 只在双层表头添加
      class: 'text-center',
      formatter: function (val, row, index) {
          return index + 1;
      }
  }, {
      field: "singleName",
      title: "单体",
      sortable: true, //可排序
      rowspan: 2      //合并行数
  }, {
      title: "操作",
      class: 'text-center opLinkGroup',
      rowspan: 2,
      searchable: false,
      switchable: false,
      events: operateEvents,
      formatter: operateFormatter
  }],[{
      field: "wfCount",
      title: "违反强条",
      class: 'pl-10',
  },{
      field: "shouldCount",
      title: "应"
  },{
      field: "fitCount",
      title: "宜",
      class: 'pl-10'
  }]]
});



</code></pre>
  </div>
  <div class="margin">
    <h3>pagination分页</h3>
<div class="htmlbox2">
  <div class="htmlbox">
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;wrap-fenYe&quot;</span>&gt;</span>
   <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;pagebar&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div>

</div>
    <pre><code class="json">
$(".pagebar").pagination({
  url: "/r/project/listStaff",
  params: {
    "data": $("#searchVal").val(),
    "data2": $("#activityId").val()
  },
  jump: false,
  showData: 4,
  //showOverViews:true,
  count: 4,
  callback: function (data) {
    $.each(data.rows, function (i, o) {
        o.roleId = roleId;
        o.roleName = roleName;
    });
    $("tbody").html(template("listTpl", data));
    liBindClick();
    checkBySelected();
  }
});

</code></pre>
    <h4><b>显示方案一</b></h4>
    <img src="assets/highlight/a1.png" alt="">
    <h4><b>显示方案二</b></h4>
    <img src="assets/highlight/a2.png" alt="">
  </div>
  <div class="margin">
    <h3>分页options(参数配置)</h3>
    <table class="table table-bordered">
      <thead>
      <tr>
        <td>参数</td>
        <td>默认值</td>
        <td class="explain">说明</td>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>pageCount</td>
        <td>9</td>
        <td class="explain">总页数</td>
      </tr>
      <tr>
        <td>totalData</td>
        <td>0</td>
        <td class="explain">数据总条数</td>
      </tr>
      <tr>
        <td>current</td>
        <td>1</td>
        <td class="explain">当前第几页</td>
      </tr>
      <tr>
        <td>showData</td>
        <td>0</td>
        <td class="explain">每页显示的条数</td>
      </tr>
      <tr>
        <td>jump</td>
        <td>true</td>
        <td class="explain">是否开启跳转到指定页数，值为boolean类型</td>
      </tr>
      <tr>
        <td>mode</td>
        <td>'fixed'</td>
        <td class="explain">模式，unfixed不固定页码按钮数量，fixed固定数量</td>
      </tr>
      <tr>
        <td>count</td>
        <td>4</td>
        <td class="explain">mode为unfixed时显示当前选中页前后页数，mode为fixed显示页码总数</td>
      </tr>
      <tr>
        <td>coping</td>
        <td>true</td>
        <td class="explain">是否开启首页和末页，值为boolean</td>
      </tr>
      <tr>
        <td>isHide</td>
        <td>true</td>
        <td class="explain">总页数为0或1时隐藏分页控件</td>
      </tr>
      <tr>
        <td>keepShowPN</td>
        <td>false</td>
        <td class="explain">是否一直显示上一页下一页</td>
      </tr>

      <tr>
        <td><b>showOverView</b></td>
        <td>false</td>
        <td class="explain"><b>是否显示方案一 也就是默认的样式 一般不用配置</b></td>
      </tr>
      <tr>
        <td><b>showOverViews</b></td>
        <td>false</td>
        <td class="explain"><b>是否显示方案二 简易居中的分页 适合弹窗等面积小的地方使用</b></td>
      </tr>
      <tr>
        <td>prevCls</td>
        <td>'prev'</td>
        <td class="explain">上一页class</td>
      </tr>
      <tr>
        <td>nextCls</td>
        <td>'next'</td>
        <td class="explain">下一页class</td>
      </tr>
      <tr>
        <td>prevContent</td>
        <td>'上一页'</td>
        <td class="explain">上一页节点内容</td>
      </tr>
      <tr>
        <td>nextContent</td>
        <td>'下一页'</td>
        <td class="explain">下一页节点内容</td>
      </tr>
      <tr>
        <td>activeCls</td>
        <td>'active'</td>
        <td class="explain">当前页选中状态class名</td>
      </tr>


      <tr>
        <td>homePage</td>
        <td>'首页'</td>
        <td class="explain">首页节点内容，默认为空</td>
      </tr>
      <tr>
        <td>endPage</td>
        <td>'尾页'</td>
        <td class="explain">尾页节点内容，默认为空</td>
      </tr>

      <tr>
        <td>jumpIptCls</td>
        <td>'jump-ipt'</td>
        <td class="explain">文本框内容</td>
      </tr>
      <tr>
        <td>jumpBtnCls</td>
        <td>'jump-btn'</td>
        <td class="explain">跳转按钮class</td>
      </tr>
      <tr>
        <td>jumpBtn</td>
        <td>'跳转'</td>
        <td class="explain">跳转按钮文本内容</td>
      </tr>
      <tr>
        <td>callback</td>
        <td>function(){}</td>
        <td class="explain">回调函数，参数"index"为当前页</td>
      </tr>
      </tbody>
    </table>
  </div>
</div>


</body>
</html>
